<template>
  <div class="home-container">
    <el-card class="welcome-card">
      <template #header>
        <div class="card-header">
          <span>欢迎使用肿瘤免疫数据管理平台</span>
        </div>
      </template>
      <p class="description">
        本平台是一个面向科研人员的轻量化肿瘤免疫数据管理单页应用（SPA），
        支持“数据上传→预处理→降维分析→模型校准→结果导出”全流程可视化操作，
        结合大模型交互简化操作门槛，保障科研数据处理的专业性、可复现性与安全性。
      </p>
    </el-card>

    <el-row :gutter="20" class="quick-start-cards">
      <el-col :span="8">
        <el-card class="action-card" shadow="hover" @click="$router.push('/file-manager')">
          <div class="action-content">
            <el-icon><Files /></el-icon>
            <h3>文件管理</h3>
            <p>上传、查看和管理您的科研数据文件。</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="action-card" shadow="hover" @click="$router.push('/workflow-designer')">
          <div class="action-content">
            <el-icon><Share /></el-icon>
            <h3>工作流编辑器</h3>
            <p>通过拖拽节点构建和执行您的数据分析流程。</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="action-card" shadow="hover" @click="$router.push('/llm-assistant')">
          <div class="action-content">
            <el-icon><ChatDotRound /></el-icon>
            <h3>大模型交互</h3>
            <p>使用自然语言指令快速生成分析工作流。</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { Files, Share, ChatDotRound } from '@element-plus/icons-vue';
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 30px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.description {
  line-height: 1.6;
  color: #606266;
}

.quick-start-cards {
  margin-top: 20px;
}

.action-card {
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
}

.action-card:hover {
  transform: translateY(-5px);
  border-color: #409eff;
}

.action-content .el-icon {
  font-size: 48px;
  color: #409eff;
  margin-bottom: 15px;
}

.action-content h3 {
  margin: 10px 0;
  font-size: 16px;
}

.action-content p {
  font-size: 14px;
  color: #909399;
}
</style>